<template>
  <div>
    <swiper>
      <swiper-slide v-for="(page, index) in pages" :key="index" >
        <div class="icons">
         <div class="icons-sub icon8"  :style="{backgroundImage:'url(' + icon.bg + ')'}" v-for="icon  in page" :key="icon.id">{{icon.title}}</div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOtion: {
        autoplay: true
      },
      icons: [{
        id: 1,
        title: '景点门票',
        bg: 'https://i.postimg.cc/Tw3V7c2m/fengjign.png'
      }, {
        id: 2,
        title: '泡温泉',
        bg: 'https://i.postimg.cc/Tw3V7c2m/fengjign.png'
      }, {
        id: 3,
        title: '分界洲岛',
        bg: 'https://i.postimg.cc/Tw3V7c2m/fengjign.png'
      }, {
        id: 4,
        title: '一日游',
        bg: 'https://i.postimg.cc/Tw3V7c2m/fengjign.png'
      }, {
        id: 5,
        title: '必游榜单',
        bg: 'https://i.postimg.cc/Tw3V7c2m/fengjign.png'
      }, {
        id: 6,
        title: '大小洞天',
        bg: 'https://i.postimg.cc/Tw3V7c2m/fengjign.png'
      }, {
        id: 7,
        title: '自然风光',
        bg: 'https://i.postimg.cc/Tw3V7c2m/fengjign.png'
      }, {
        id: 8,
        title: '全部',
        bg: 'https://i.postimg.cc/Tw3V7c2m/fengjign.png'
      }
      ]
    }
  },
  // /* eslint-disable */
  computed: {
    pages () {
      const pages = []
      this.icons.forEach((icon, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(icon)
      })
      return pages
    }
  }

}
</script>

<style scoped lang="stylus">
  .icons
    width: 100%;
    height: 3.3rem;
    display flex
    flex-wrap wrap
   .icons-sub
    width 25%
    text-align center
    color 333
    overflow: hidden
    white-space nowrap
    text-over ellipsis
   .icon8
     background: url("") 0.5rem 0.2rem no-repeat;
     background-size 50% 60%
     padding-top: 64px
</style>
